﻿<!DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2015-2020 Jean-Marc VIGLINO, 
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <title>ol-ext: WMTS Capabilities control</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="description" content="DBPedia layer for OL3" />
  <meta name="keywords" content="openlayers, control, source, WMTS, getCapabilities, capabilites" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>

  <!-- Proj4 -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.14/proj4.js"></script>
  <!-- filesaver-js -->
  <script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>

  <link rel="stylesheet" href="../style.css" />
  <style>
    #map {
      width: 100%;
      height: 60vh;
    }
    .ol-wmscapabilities ul {
      padding: 0;
    }
  </style>
</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: WMTS Capabilities control</h1>
  </a>
  <div class="info">
    <b>ol/control/WMTSCapabilities</b> is a control to load WMTS layers on ol maps.
    <br/>
    It displays a dialog to select the service you want to add using getCapabilities of the service.
    <br/>
    Some services may not respond correctly because of 
    <a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS policies</a> 
    and you may have to use a proxy to access the getCapabilities...
    <br/>
    Listen to the <i>load</i> event to get the selected layer or options to create it.
    <br/>
    Look at the console for the layer definition to insert into your code.
  </div>

  <!-- DIV pour la carte -->
  <div id="map"></div>
  <div class="options">
    <ul>
      <li>
        url: 
        <input id="url" type="text" value="https://data.geopf.fr/wmts?" />
        <button onclick="cap.showDialog($('#url').val())">search</button>
      </li>
      <li>
        Services : 
        <button onclick="cap.showDialog('https://data.geopf.fr/wmts'); ">Géoservices</button>
        <button onclick="cap.showDialog('https://data.geopf.fr/private/wmts?apikey=ign_scan_ws'); ">Geoservices avec clé</button>
      </li>
    </ul>
    <button onclick="exportCarte()" style="display: none;">exportCarte</button>
  </div>
  
<script type="text/javascript">
/*
  // Define proj4 2154
  proj4.defs("EPSG:2154","+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
  if (ol.proj.proj4 && ol.proj.proj4.register) ol.proj.proj4.register(proj4);
*/
  // The map
  var map = new ol.Map({
    target: 'map',
    view: new ol.View ({
      zoom: 15,
      center: [261204.43490751847, 6250258.191535994]
    }),
    layers: [ ]
  });

  map.addControl(new ol.control.LayerSwitcher({ 
    trash: true, 
    extent: true,
    collapsed: false 
  }));
  var plink = new ol.control.Permalink({ visible: false, localStorage: 'position' });
  map.addControl(plink);
  map.addControl(new ol.control.SearchNominatim({ zoomOnSelect: 13 }));

  var cap = new ol.control.WMTSCapabilities({ 
    // target: $('.options').get(0),
    target: document.body,
    // srs: ['EPSG:2154'],
    // Set optional apikey (for use with IGN's Geoservices)
    optional: 'apikey,key',
    cors: true,
    services: {
      'Géoplateforme' : 'https://data.geopf.fr/wmts',
      'Géoplateforme + apikey' : 'https://data.geopf.fr/private/wmts?apikey=ign_scan_ws',
      'Géoportail-cartes' : 'https://wxs.ign.fr/cartes/geoportail/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities',
      'Géoportail-ortho' : 'https://wxs.ign.fr/ortho/geoportail/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities',
      'Géoportail-orthohisto' : 'https://wxs.ign.fr/orthohisto/geoportail/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities',
      'Géoportail-satellite' : 'https://wxs.ign.fr/satellite/geoportail/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities',
      'Géoportail-cartovecto' : 'https://wxs.ign.fr/cartovecto/geoportail/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities',
      'Géoportail-economie' : 'https://wxs.ign.fr/economie/geoportail/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities',
      'Géoportail-environnement' : 'https://wxs.ign.fr/environnement/geoportail/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities',
      'Géoportail-sol' : 'https://wxs.ign.fr/sol/geoportail/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities',
      'Géoportail-parcellaire' : 'https://wxs.ign.fr/parcellaire/geoportail/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities',
      'Géoportail-transports' : 'https://wxs.ign.fr/transports/geoportail/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities',
      'Géoportail-administratif' : 'https://wxs.ign.fr/administratif/geoportail/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities',
      'Géoportail-altimetrie' : 'https://wxs.ign.fr/altimetrie/geoportail/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities',
      'Géoportail-agriculture' : 'https://wxs.ign.fr/agriculture/geoportail/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities',
      'Géoportail-CLC' : 'https://wxs.ign.fr/clc/geoportail/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities'
    },
    // Show trace in the console
    trace: true
  });
  map.addControl(cap);

  cap.on('load', function(e) {
    map.addLayer(e.layer);
    e.layer.set('legend', e.options.data.legend);
    plink.setUrlParam('url', e.options.source.url);
    plink.setUrlParam('layer', e.options.source.layer);
  });

  // Permalink
  var url = plink.getUrlParam('url');
  var layerName = plink.getUrlParam('layer');
  if (url) {
    console.log(layerName)
    cap.loadLayer(url, layerName);
  } else {
    map.addLayer(new ol.layer.Tile({ name:"OSM", source: new ol.source.OSM() }));
  }

  /* Export .carte file */
  function exportCarte() {
    var lonlat = ol.proj.toLonLat(map.getView().getCenter());
    var carte = {
      "param": {
        "lon": lonlat[0],
        "lat": lonlat[1],
        "rot": 0,
        "zoom": map.getView().getZoom(),
        "titre": "WMS",
        "description": ""
      },
      "layers": []
    }
    map.getLayers().getArray().forEach(function(l) {
      if (l.get('WMS')) {
        carte.layers.push({
          "wms": true,
          "type": "WMS",
          "name": l.get('title'),
          "titre": l.get('title'),
          "visibility": l.getVisible(),
          "opacity": l.getOpacity(),
          "copyright": l.getSource().getAttributions()()[0] || '&copy;',
          "wmsparam": {
            "layer": {
              "title": l.get('title'),
              "extent": l.get('extent'),
              "minResolution": l.getMinResolution(),
              "maxResolution": l.getMaxResolution()
            },
            "source": {
            "url": l.getSource().getUrls()[0],
            "projection": "EPSG:3857",
            "crossOrigin": "anonymous",
            "params": {
              "LAYERS": l.getSource().getParams().LAYERS,
              "FORMAT": l.getSource().getParams().FORMAT,
              "VERSION": l.getSource().getParams().VERSION,
              "MAP": l.getSource().getParams().MAP || ''
            }
            },
            "attribution": {
              "html": l.getSource().getAttributions()()[0] || '&copy;'
            },
            "originator": [],
            "legend": []
          },
          "maxZoomCluster": 20,
          "radiusCluster": 40
        })
      }
    });
    var blob = new Blob([JSON.stringify(carte, null, ' ')], {type: 'text/plain;charset=utf-8'});
    saveAs(blob, 'carte.carte');
  }

</script>

</body>
</html>